<template>
	<div>
		<el-row class="replied" v-for="(item, index) in comment" :key="index">
			<!-- 头像区 -->
			<el-col :span="2">
				<div class="left">
					<img v-lazy="item.user.avatarUrl + '?param=120y120'">
				</div>
			</el-col>
			<!-- 评论区 -->
			<el-col :span="22">
				<div class="right">
					<p class="comment">
						<span>{{ item.user.nickname }}:</span>
						{{ item.content }}
					</p>
					<!-- 被评论区 -->
					<div class="be-replied" v-if="item.beReplied[0]">
						<p class="comment">
							<span>{{ item.beReplied[0].user.nickname }}:</span>
							{{ item.beReplied[0].content }}
						</p>
					</div>
					<div class="time">
						<p>{{ item.time | formatDate }}</p>
						<p><i class="el-icon-s-promotion"></i>{{ item.likedCount }}</p>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { formatDate } from "@/assets/tool.js"
	export default {
		name: 'Comment',
		props: ["comment"],
		filters: {
			formatDate: function(time) {
				return formatDate(time);
			}
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.el-row {
		margin: 40px 0;
	}
	.replied .left {
		border-radius: 50%;
		width: 55px;
		height: 55px;
		overflow: hidden;
	}
	.replied .left > img {
		width: 100%;
		height: 100%;
	}
	.replied .right {
		padding: 0 10px;
	}
	.comment{
		font-size: var(--small-font-size);
		color: var(--routine-font-color);
		line-height: 22px;
	}
	.comment > span {
		color: var(--blue);
		margin-right: 5px;
	}
	.replied .right .be-replied {
		background-color: #E6E5E6;
		padding: 8px;
		border-radius: 5px;
		margin: 8px 0;
	}
	.replied .right .time > p {
		float: left;
		margin-top: 10px;
		font-size: var(--small-font-size);
		color: var(--secondary-font-color);
	}
	.replied .right .time > p:nth-child(2) {
		float: right;
	}
</style>
